<template>
  <div id="top" :class="navBarFixed == true ? 'navBarWrap' :''">
    <div id="sopt"></div>
    <div id="topBox">
      <div class="top-left"><i class="el-icon-s-shop"></i>&nbsp;&nbsp;欢迎来到校易网（校园二手商品交易网）</div>
      <div class="top-middle"></div>
      <div class="top-right">
        <router-link to="/home">首页</router-link>
        <span class="line">|</span>

        <router-link v-if="!$store.state.isLogin" to="/login" class="sign-in">您好，请登录</router-link>
        <!-- <router-link v-else to="/profile" class="sign-in">欢迎您，{{$store.state.username}}</router-link> -->
        <span v-else>
          欢迎您，<a href="javascript:void(0)" @click="profileClick">{{$store.state.username}}</a>
          <el-row class="demo-avatar demo-basic" style="display:inline-block; vertical-align: middle; cursor:pointer">
            <!-- <el-col :span="12"> -->
              <div class="demo-basic--circle" @click="profileClick">
                <el-avatar size="small" :src="$store.state.userImg" ></el-avatar>
              </div>
            <!-- </el-col>   -->
          </el-row>
          <span class="line">|</span><a href="javascript:void(0)" @click="signOut">退出</a>
        </span>
        <span class="line">|</span>
        <router-link to="/register" class="register">免费注册</router-link>
        <span class="line">|</span>
        <a href="javascript:void(0)" @click="orderClick">我的订单</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    // 事件监听滚动条
    if(location.pathname === "/home")
      window.addEventListener('scroll', this.watchScroll)
  },
  data() {
    return {
      navBarFixed: false
    }
  },
  methods: {
    watchScroll () {
      if(location.pathname === "/home") {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        //  当滚动超过 50 时，实现吸顶效果
        if (scrollTop > 35) {
          this.navBarFixed = true
          document.getElementById('search').style.marginTop = 35 + 'px'
        } else {
          this.navBarFixed = false
          document.getElementById('search').style.marginTop = 0
          // document.getElementById('top').style.position = 'static'
        }
      }
    },
    signOut() {
      // 点击退出，改变状态中的isLogin为false、userId为空、
      this.$store.commit('changeLogin')
      this.$store.commit('changeUserId', '')
      if(location.pathname === '/home') {
        this.$router.go(0)
      } else {
        this.$router.push('/home')
      }
    },
    profileClick() {
      // 点击用户名或头像
      this.$store.commit('changeProfileIndex', '/profile/userInfo')
      this.$router.push('/profile')
    },
    orderClick() {
      // 点击我的订单
      if(!this.$store.state.isLogin) {
        this.$message({
          message: '您还未登录，请先登录！！',
          type: 'warning'
        })
        this.$router.push('/login')
      } else {
        this.$store.commit('changeProfileIndex', '/profile/goods')
        this.$router.push('/profile/goods')
      }
    }
  }

}
</script>

<style>
  #top {
    background: #e3e4e5;
    height: 35px;
    font-size: 15px;
    margin-bottom: 20px;
  }

  #topBox {
    width: 70%;
    margin: 0 auto;
  }

  .top-left {
    /* color: #409EFF; */
    float: left;
    line-height: 35px;
  }

  .top-right {
    float: right;
    line-height: 35px;
    color: #6c6c6c;
  }

  .top-right a {
    text-decoration: none;
    color: inherit;
  }

  .top-right a:hover {
    /* color: #e33333; */
    color: #f00;
  }

  .top-right .register {
    color: #f10215;
    /* margin-left: 5px; */
  }

  .top-right .line {
    margin: 0 8px;
    opacity: 0.5;
  }

  .navBarWrap {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
  }

</style>